<template>
  <div id="deviceInfo" >
    <Modal v-model="showDialog"
           :width="dialogWidth"
           :loading="isLoging"
           :title="title"
           :mask-closable="false"
           @on-ok="close()"
           @on-cancel="close()"
           :footer-hide="true">
      <div id="formStep" style="margin-top: 1rem; margin-right: 20px;">
        <Row :gutter="24">
          <Col :span="12">
            <Form v-if="currentStep === 2 || currentStep === 3" ref="mediaServerForm1" :rules="rules" :model="mediaServerForm" :label-width="140" label-position="right">
              <FormItem label="IP" prop="ip">
                <Input  v-if="currentStep === 2" v-model="mediaServerForm.ip" disabled></Input>
                <Input  v-if="currentStep === 3"  v-model="mediaServerForm.ip"></Input>
              </FormItem>
              <FormItem label="HTTP端口" prop="httpPort">
                <Input  v-if="currentStep === 2"  v-model="mediaServerForm.httpPort" disabled></Input>
                <Input  v-if="currentStep === 3"  v-model="mediaServerForm.httpPort"></Input>
              </FormItem>
              <FormItem label="SECRET" prop="secret">
                <Input v-if="currentStep === 2"  v-model="mediaServerForm.secret" disabled></Input>
                <Input v-if="currentStep === 3"  v-model="mediaServerForm.secret"></Input>
              </FormItem>
              <FormItem label="HOOK IP" prop="ip">
                <Input v-model="mediaServerForm.hookIp" placeholder="媒体服务HOOK_IP" clearable></Input>
              </FormItem>
              <FormItem label="SDP IP" prop="ip">
                <Input v-model="mediaServerForm.sdpIp" placeholder="媒体服务SDP_IP" clearable></Input>
              </FormItem>
              <FormItem label="流IP" prop="ip">
                <Input v-model="mediaServerForm.streamIp" placeholder="媒体服务流IP" clearable></Input>
              </FormItem>
              <FormItem label="HTTPS PORT" prop="httpSSlPort">
                <Input v-model="mediaServerForm.httpSSlPort" placeholder="媒体服务HTTPS_PORT" clearable></Input>
              </FormItem>
              <FormItem label="RTSP PORT" prop="rtspPort">
                <Input v-model="mediaServerForm.rtspPort" placeholder="媒体服务RTSP_PORT" clearable></Input>
              </FormItem>
              <FormItem label="RTSPS PORT" prop="rtspSSLPort">
                <Input v-model="mediaServerForm.rtspSSLPort" placeholder="媒体服务RTSPS_PORT" clearable></Input>
              </FormItem>

            </Form>
          </Col>
          <Col :span="12">
            <Form v-if="currentStep === 2 || currentStep === 3"  ref="mediaServerForm2" :rules="rules"
                  :model="mediaServerForm" :label-width="180" label-position="right">
              <FormItem label="RTMP PORT" prop="rtmpPort">
                <Input v-model="mediaServerForm.rtmpPort" placeholder="媒体服务RTMP_PORT" clearable></Input>
              </FormItem>
              <FormItem label="RTMPS PORT" prop="rtmpSSlPort">
                <Input v-model="mediaServerForm.rtmpSSlPort" placeholder="媒体服务RTMPS_PORT" clearable></Input>
              </FormItem>
              <FormItem label="自动配置媒体服务" >
                <i-switch v-model="mediaServerForm.autoConfig"></i-switch>
              </FormItem>
              <FormItem label="收流端口模式" >
                <i-switch v-model="mediaServerForm.rtpEnable" size="large" >
                  <span slot="open">多端口</span>
                  <span slot="close">单端口</span>
                </i-switch>
                <!--                <el-switch  active-text="多端口" inactive-text="单端口" v-model="mediaServerForm.rtpEnable"></el-switch>-->
              </FormItem>

              <FormItem v-if="!mediaServerForm.rtpEnable" label="收流端口" prop="rtpProxyPort">
                <Input v-model.number="mediaServerForm.rtpProxyPort" clearable></Input>
              </FormItem>
              <FormItem v-if="mediaServerForm.rtpEnable" label="收流端口" >
                <Input v-model="rtpPortRange1" placeholder="起始" @change="portRangeChange" clearable style="width: 100px" prop="rtpPortRange1"></Input>
                -
                <Input v-model="rtpPortRange2" placeholder="终止" @change="portRangeChange" clearable style="width: 100px" prop="rtpPortRange2"></Input>
              </FormItem>
              <FormItem label="推流端口" prop="sendRtpPortRange1">
                <Input v-model="sendRtpPortRange1" placeholder="起始" @change="portRangeChange" clearable style="width: 100px" prop="sendRtpPortRange1"></Input>
                -
                <Input v-model="sendRtpPortRange2" placeholder="终止" @change="portRangeChange" clearable style="width: 100px" prop="sendRtpPortRange2"></Input>
              </FormItem>
              <FormItem label="无人观看多久后停止拉流(毫秒)" >
                <Input v-model="mediaServerForm.streamNoneReaderDelayMs" clearable></Input>

              </FormItem>
              <FormItem label="录像管理服务端口" prop="recordAssistPort">
                <Input v-model="mediaServerForm.recordAssistPort">
                  <!--                  <el-button v-if="mediaServerForm.recordAssistPort > 0" slot="append" type="primary" @click="checkRecordServer">测试</el-button>-->
                  <Button v-if="mediaServerForm.recordAssistPort > 0" class="el-icon-check" slot="append" type="primary" @click="checkRecordServer"></Button>
                </Input>
                <i v-if="recordServerCheck == 1" class="el-icon-success" style="color: #3caf36; position: absolute;top: 14px;"></i>
                <i v-if="recordServerCheck == 2" class="el-icon-loading" style="color: #3caf36; position: absolute;top: 14px;"></i>
                <i v-if="recordServerCheck === -1" class="el-icon-error" style="color: #c80000; position: absolute;top: 14px;"></i>
              </FormItem>
              <FormItem>
                <div style="float: right;">
                  <Button type="primary"  @click="onSubmit" >提交</Button>
                  <Button @click="close">取消</Button>
                </div>
              </FormItem>
            </Form>
          </Col>
        </Row>

      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data(){
    return{
      dialogWidth:'400px',
      isLoging: false,
      title: 'Title',
      showDialog:false,
      currentStep:1,

      deviceData:{
        id: "C-15",
        title: "海康001",
        type: "chn",
        online: "1",
        arrt: {
          code: "44030000491327000001",
          orgName: "总局",
          locate: "",
          deviceCode: "44030000491327000001",
          devName: "摄像头001",
          userName: "测试01",
          deviceId: 33,
          deviceName: "摄像头001",
          orgId: 1,
          userCode: "test01",
          speed: "0.00",
          orgCode: "00100",
          channelCode: "44030000491327000001",
          direction: "0°"
        },
        longitude: 114.2543103313953,
        latitude: 22.71526474866734,
        nodeKey: 7
      }
    }
  },
  methods:{
    openDialog: function (param, callback) {
      this.showDialog = true;
      this.listChangeCallback = callback;
      if (param != null) {
        //编辑模式
        this.mediaServerForm = param;
        this.currentStep = 3;
        if (param.rtpPortRange) {
          let rtpPortRange = this.mediaServerForm.rtpPortRange.split(",");
          if (rtpPortRange.length > 0) {
            this.rtpPortRange1 =  rtpPortRange[0]
            this.rtpPortRange2 =  rtpPortRange[1]
          }
        }
        let sendRtpPortRange = this.mediaServerForm.sendRtpPortRange.split(",");
        this.sendRtpPortRange1 = sendRtpPortRange[0]
        this.sendRtpPortRange2 = sendRtpPortRange[1]
      }else{
        this.currentStep = 1;
        this.serverCheck = -1;
      }
    },
  }
}

</script>
<style lang="less">
  @import "../.././template";
</style>
